<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" v-model="addDialog" :title="title">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="抖音名称" prop="tiktokName">
            <el-input v-model="form.tiktokName" />
          </el-form-item>
          <el-form-item label="注册手机号" prop="registerPhone">
            <el-input v-model="form.registerPhone" />
          </el-form-item>
          <el-form-item label="门店ID" prop="bdShopId">
            <el-input v-model="form.bdShopId" />
          </el-form-item>
          <el-form-item label="bdClientId" prop="bdClientId">
            <el-input v-model="form.bdClientId" />
          </el-form-item>
          <el-form-item label="bdSecret" prop="bdSecret">
            <el-input v-model="form.bdSecret" />
          </el-form-item>
          <el-form-item label="配置状态" prop="isStatus">
            <el-switch v-model="isStatus" active-color="#13ce66" inactive-color="#ff4949" />
          </el-form-item>

          <el-form-item label="商户" prop="shopId">
            <el-select v-model="form.shopId" clearable placeholder="请选择" style="width: 240px">
              <el-option
                v-for="item in shopInfoList"
                :key="item.shopId"
                :label="item.shopName"
                :value="item.shopId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="default" @click="addDialog = false">取消</el-button>
            <el-button type="primary" @click="submitForm">确认</el-button>
          </div>
        </template>
      </el-dialog>

      <div>
        <div>
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
          >
            <el-form-item label="店铺名称">
              <el-select
                v-model="queryParams.shopId"
                clearable
                placeholder="请选择"
                style="width: 240px"
              >
                <el-option
                  v-for="item in shopInfoList"
                  :key="item.shopId"
                  :label="item.shopName"
                  :value="item.shopId"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="">
              <el-input
                v-model="queryParams.meituanShopName"
                placeholder="请输入抖音商户名称"
                clearable
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="success" round @click="handleAdd">添加配置信息</el-button>
        </div>
      </div>

      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="loading"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :data="tiktokData"
        row-key="id"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="商户名称" prop="shopName" />
        <el-table-column label="抖音商户名称" prop="tiktokName" />
        <el-table-column label="宝点门店Id" prop="bdShopId" />
        <el-table-column label="clientId" prop="bdClientId" />
        <el-table-column label="状态" prop="isStatus">
          <template #default="scope">
            {{
              formatDictMap('MEITUAN_STATUS').find((item) => item.value == scope.row.isStatus).label
            }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="创建人" prop="createBy" />
        <el-table-column label="操作" width="240px" fixed="right">
          <template #default="scope">
            <el-button type="default" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button type="default" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="total > 0"
        :total="total"
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        @change="getList"
      />
    </div>
  </div>
</template>

<script>
  import {
    listTiktokInfo,
    saveTiktokInfo,
    updateTiktokInfo,
    deleteTiktokInfo,
    details,
  } from '@/api/tiktok/index.js';
  import { getShopAllList } from '@/api/shop/shop.js';
  import { getDictOptions } from '@/utils/dict';
  import { ElMessage, ElMessageBox } from 'element-plus';

  export default {
    name: 'DeviceTypeList',
    dicts: ['MEITUAN_STATUS'],
    data() {
      return {
        loading: false,
        single: true,
        multiple: true,
        tableDataList: [],
        addDialog: false,
        title: '添加配置信息',
        form: {},
        total: 0,
        page: {
          pageNum: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
        queryParams: {},
        showSearch: true,
        rules: {
          tiktokName: [{ required: true, message: '抖音名称不可为空', trigger: 'blur' }],
          registerPhone: [{ required: true, message: '注册手机号不可为空', trigger: 'blur' }],
          bdShopId: [{ required: true, message: '门店ID不可为空', trigger: 'blur' }],
          bdClientId: [{ required: true, message: 'clientId不可为空', trigger: 'blur' }],
          bdSecret: [{ required: true, message: 'secret不可为空', trigger: 'blur' }],
          isStatus: [{ required: true, message: '请选择状态', trigger: 'blur' }],
          shopId: [{ required: true, message: '请选择商户', trigger: 'blur' }],
        },
        tiktokData: [],
        shopInfoList: [],
        isStatus: true,
      };
    },
    created() {
      this.getList();
      getShopAllList({}).then((res) => {
        this.shopInfoList = res;
      });
    },
    methods: {
      // 格式化字典
      formatDictMap(dictEnum) {
        return getDictOptions(dictEnum);
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.page.pageNum = 1;
        this.getList();
      },
      /**
       * 搜索重置
       */
      resetQuery() {
        this.queryParams = {};
      },
      // 提交表单
      submitForm() {
        this.form.isStatus = this.isStatus == true ? 1 : 2;
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.form.id) {
              updateTiktokInfo(this.form).then(() => {
                ElMessage({
                  message: '修改成功',
                  type: 'success',
                });
                this.addDialog = false;
                this.getList();
              });
            } else {
              // 保存商品分类
              saveTiktokInfo(this.form).then(() => {
                ElMessage({
                  message: '新增成功',
                  type: 'success',
                });
                this.addDialog = false;
                this.getList();
              });
            }
          }
        });
      },
      // 新增类型
      handleAdd() {
        this.reset();
        this.addDialog = true;
        this.title = '添加美团配置信息';
      },
      // 表单重置
      reset() {
        this.form = {
          appKey: undefined,
          secret: undefined,
          appShopAccount: undefined,
          appShopAccountname: undefined,
          checkType: '1',
          authoUrl: undefined,
          status: 1,
          id: undefined,
        };
        this.status = true;
      },
      /** 查询分类列表 */
      getList() {
        this.loading = true;
        listTiktokInfo(this.page, { ...this.page, ...this.queryParams }).then((res) => {
          this.tiktokData = res.records;
          this.total = res.total;
          this.loading = false;
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id;
        if (!id) {
          ElMessage({
            message: '修改成功',
            type: 'warning',
          });
          return;
        }
        details(id).then((res) => {
          this.form = res;
          this.addDialog = true;
          this.title = '修改抖音配置信息';
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const id = row.id;
        ElMessageBox.confirm('是否确认删除该项数据？')
          .then(function () {
            return deleteTiktokInfo(id);
          })
          .then(() => {
            this.getList();
            ElMessage({
              message: '删除成功',
              type: 'success',
            });
          })
          .catch(() => {});
      },
    },
  };
</script>

<style scoped></style>
